<!-- 数据设置组件 -->
<template>
    <div>
        <el-collapse>
            <el-collapse-item title="数据设置">
                <el-form class="demo-form-inline" :inline="true" :model="component" label-position="left" size="mini" ref="settingForm">
                    <el-form-item label="请求方式">
                        <el-select v-model="component.dataSource" placeholder="请选择" style="width:100px">
                            <el-option label="静态数据" value="1"></el-option>
                            <el-option label="动态数据" value="2"></el-option>
                        </el-select>
                        &nbsp;<el-button type="text" @click="editData(component)">数据配置</el-button>
                    </el-form-item>
                    <div v-if="component.type.toLowerCase().indexOf('line')>=0 || component.type.toLowerCase().indexOf('area')>=0 || component.type.toLowerCase().indexOf('histogram')>=0">
                    <el-form-item label="x轴数据">
                        <el-select v-model="component.spec.xField" placeholder="请选择" @change="commonUtil.reLoadChart(chartsComponents,component)" style="width:180px" multiple allow-create filterable>
                          <el-option
                            v-for="item in component.dynamicDataSettings.dataColumns"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="y轴数据">
                        <el-select v-model="component.spec.yField" placeholder="请选择" @change="commonUtil.reLoadChart(chartsComponents,component)" style="width:180px" multiple allow-create filterable>
                          <el-option
                            v-for="item in component.dynamicDataSettings.dataColumns"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="系列分组">
                        <el-select v-model="component.spec.seriesField" placeholder="请选择" @change="commonUtil.reLoadChart(chartsComponents,component)" style="width:180px" multiple allow-create filterable>
                          <el-option
                            v-for="item in component.dynamicDataSettings.dataColumns"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    </div>
                    <div v-if="component.type.toLowerCase().indexOf('radar')>=0 || component.type.toLowerCase().indexOf('gauge')>=0 || component.type.toLowerCase().indexOf('circularprogress')>=0">
                        <el-form-item label="分类字段">
                        <el-select v-model="component.spec.categoryField" placeholder="请选择" @change="commonUtil.reLoadChart(chartsComponents,component)" style="width:180px" allow-create filterable clearable>
                          <el-option
                            v-for="item in component.dynamicDataSettings.dataColumns"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="数值字段">
                        <el-select v-model="component.spec.valueField" placeholder="请选择" @change="commonUtil.reLoadChart(chartsComponents,component)" style="width:180px" allow-create filterable clearable>
                          <el-option
                            v-for="item in component.dynamicDataSettings.dataColumns"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="系列分组">
                        <el-select v-model="component.spec.seriesField" placeholder="请选择" @change="commonUtil.reLoadChart(chartsComponents,component)" style="width:180px" allow-create filterable clearable>
                          <el-option
                            v-for="item in component.dynamicDataSettings.dataColumns"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    </div>
                    <div v-if="component.type.toLowerCase().indexOf('pie')>=0 || component.type.toLowerCase().indexOf('funnel')>=0">
                        <el-form-item label="分类字段">
                        <el-select v-model="component.spec.categoryField" placeholder="请选择" @change="commonUtil.reLoadChart(chartsComponents,component)" style="width:180px" allow-create filterable clearable>
                          <el-option
                            v-for="item in component.dynamicDataSettings.dataColumns"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="数值字段">
                        <el-select v-model="component.spec.valueField" placeholder="请选择" @change="commonUtil.reLoadChart(chartsComponents,component)" style="width:180px" allow-create filterable clearable>
                          <el-option
                            v-for="item in component.dynamicDataSettings.dataColumns"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    </div>
                    <div v-if="component.type.toLowerCase().indexOf('scatter')>=0">
                        <el-form-item label="x轴数据">
                        <el-select v-model="component.spec.xField" placeholder="请选择" @change="commonUtil.reLoadChart(chartsComponents,component)" style="width:180px" allow-create filterable clearable>
                          <el-option
                            v-for="item in component.dynamicDataSettings.dataColumns"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="y轴数据">
                        <el-select v-model="component.spec.yField" placeholder="请选择" @change="commonUtil.reLoadChart(chartsComponents,component)" style="width:180px" allow-create filterable clearable>
                          <el-option
                            v-for="item in component.dynamicDataSettings.dataColumns"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="系列分组">
                        <el-select v-model="component.spec.seriesField" placeholder="请选择" @change="commonUtil.reLoadChart(chartsComponents,component)" style="width:180px" allow-create filterable clearable>
                          <el-option
                            v-for="item in component.dynamicDataSettings.dataColumns"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    </div>
                    <div v-if="component.type.toLowerCase().indexOf('wordcloud')>=0">
                        <el-form-item label="文本字段">
                        <el-select v-model="component.spec.nameField" placeholder="请选择" @change="commonUtil.reLoadChart(chartsComponents,component)" style="width:180px" allow-create filterable clearable>
                          <el-option
                            v-for="item in component.dynamicDataSettings.dataColumns"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="权重字段">
                        <el-select v-model="component.spec.valueField" placeholder="请选择" @change="commonUtil.reLoadChart(chartsComponents,component)" style="width:180px" allow-create filterable clearable>
                          <el-option
                            v-for="item in component.dynamicDataSettings.dataColumns"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="系列分组">
                        <el-select v-model="component.spec.seriesField" placeholder="请选择" @change="commonUtil.reLoadChart(chartsComponents,component)" style="width:180px" allow-create filterable clearable>
                          <el-option
                            v-for="item in component.dynamicDataSettings.dataColumns"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    </div>
                    <div v-if="component.type.toLowerCase().indexOf('barprogress')>=0 ">
                    <el-form-item label="x轴数据">
                        <el-select v-model="component.spec.xField" placeholder="请选择" @change="commonUtil.reLoadChart(chartsComponents,component)" style="width:180px"  allow-create filterable clearable>
                          <el-option
                            v-for="item in component.dynamicDataSettings.dataColumns"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="y轴数据">
                        <el-select v-model="component.spec.yField" placeholder="请选择" @change="commonUtil.reLoadChart(chartsComponents,component)" style="width:180px"  allow-create filterable clearable>
                          <el-option
                            v-for="item in component.dynamicDataSettings.dataColumns"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="系列分组">
                        <el-select v-model="component.spec.seriesField" placeholder="请选择" @change="commonUtil.reLoadChart(chartsComponents,component)" style="width:180px"  allow-create filterable clearable>
                          <el-option
                            v-for="item in component.dynamicDataSettings.dataColumns"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    </div>
                    <div v-if="component.type.toLowerCase().indexOf('liquid')>=0">
                    <el-form-item label="数值字段">
                        <el-select v-model="component.spec.valueField" placeholder="请选择" @change="commonUtil.reLoadChart(chartsComponents,component)" style="width:180px" allow-create filterable clearable>
                          <el-option
                            v-for="item in component.dynamicDataSettings.dataColumns"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分类字段">
                        <el-select v-model="component.spec.categoryField" placeholder="请选择" @change="commonUtil.reLoadChart(chartsComponents,component)" style="width:180px" allow-create filterable clearable>
                          <el-option
                            v-for="item in component.dynamicDataSettings.dataColumns"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    </div>
                    <div v-if="component.type.toLowerCase().indexOf('map')>=0">
                      <el-form-item label="数值字段">
                        <el-select v-model="component.spec.valueField" placeholder="请选择" @change="commonUtil.reLoadChart(chartsComponents,component)" style="width:180px" allow-create filterable clearable>
                          <el-option
                            v-for="item in component.dynamicDataSettings.dataColumns"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="地区字段">
                        <el-select v-model="component.spec.nameField" placeholder="请选择" @change="commonUtil.reLoadChart(chartsComponents,component)" style="width:180px" allow-create filterable clearable>
                          <el-option
                            v-for="item in component.dynamicDataSettings.dataColumns"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    </div>
                    <div v-if="component.type.toLowerCase().indexOf('text')>=0">
                      <el-form-item label="数值字段">
                        <el-select v-model="component.spec.valueField" placeholder="请选择" @change="commonUtil.reLoadChart(chartsComponents,component)" style="width:180px" allow-create filterable clearable>
                          <el-option
                            v-for="item in component.dynamicDataSettings.dataColumns"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    </div>
                    <el-form-item label="定时刷新" v-if="component.dataSource == '2'">
                        <el-switch v-model="component.refresh">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="刷新间隔" v-if="component.dataSource == '2' && component.refresh">
                        <el-input v-model.number="component.refreshTime" style="width:180px">
                             <template slot="append">毫秒</template>
                        </el-input>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
        </el-collapse>
        <static-data-dialog v-if="customDataDialogVisiable" :customDataDialogVisiable.sync="customDataDialogVisiable" :component="component" :chartsComponents="chartsComponents"></static-data-dialog>
        <dynamic-data-dialog v-if="dynamicDialogVisiable" :dynamicDialogVisiable.sync="dynamicDialogVisiable" :component="component" :chartsComponents="chartsComponents"></dynamic-data-dialog>
    </div>
</template>

<script>
import staticDataDialog from '../../dialog/staticDataDialog.vue'
import dynamicDataDialog from '../../dialog/dynamicDataDialog.vue'
export default {
    components:{
        staticDataDialog,
        dynamicDataDialog
    },
    props:{
        component:{
            type:Object,
            default:()=>({})
        },
        chartsComponents:{
            type:Object,
            default:() => ({}),
        },
    },
    mounted() {
    },
    data(){
        return{
            customDataDialogVisiable:false,
            dynamicDialogVisiable:false
        }
    },
    methods:{
        editData(component){
            if(component.dataSource == '1'){
                this.customDataDialogVisiable = true;
            }else if(component.dataSource == '2'){
                this.dynamicDialogVisiable = true;
            }
        }
    }
}
</script>
<style scoped>
.el-form-item{
  margin-bottom:2px !important
}
::v-deep .el-form-item__label-wrap{
    margin-left:0px !important
  }
</style>
